<template>
  <div class="left">
<!--    <span @click="goToDetailed"><dv-decoration-11-->
<!--      style="width:200px;height:60px;color: #ffffff;margin: 0 auto">工伤智防</dv-decoration-11></span>-->
    <div style="height: 93%;width: 94%;margin-left: 3%;margin-top: 2%">
      <div class="data3_table" style="margin-bottom: 5px;">
        <div class="caseChange1" @click="caseDataChange('industry')"><div class="caseText">行业</div></div>
        <div class="caseChange2" @click="caseDataChange('area')"><div class="caseText">区县</div></div>
        <span @click="dialogVisible = true;">
          <dv-decoration-7 style="width:260px;height:30px;color: #ffffff;font-weight: 600;margin-left: -60px">事故案件分布</dv-decoration-7>
        </span>
        <div style="width:53%;height:90%;float: left;">
          <div id="fundRankIndustry" style="width: 100%;height: 100%;"/>
        </div>
        <div style="float: left;width:47%;color: #fff;margin-top: 3%;">
          <div v-for="(item,index) in pieList" :key="index">
            <div style="display: inline-block;float: left;width: 15px;height: 6px;margin-top: 3%;"  :style="'backgroundColor:' + item.color"></div>
            <div style="display: inline-block;float: left;width: 65%;font-size: 0.8rem;margin-left: 2%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left">
              {{ item.industry }}
            </div>
            <div style="display: inline-block;float: right">{{ item.proportion }}{{item.unit}}</div>
            <br>
          </div>
        </div>
      </div>
      <!--  表：案件区域分布  -->
      <div class="box_left2">
        <dv-decoration-7 style="width:260px;height:30px;color: #ffffff;font-weight: 600;margin-left: -55px">安全体检</dv-decoration-7>
        <div id="table06" style="width: 100%;height: 90%"/>
<!--        <dv-decoration-7 style="width:230px;height:30px;color: #ffffff;font-weight: 600;margin-left: -40px">案件区域分布</dv-decoration-7>-->
<!--        <div id="table07" style="width: 68%;height: 90%;"/>-->
<!--        <div style="width:140px;color: #fff;position: absolute;z-index: 1;right: 73.8%;top: 49%">-->
<!--          <div v-for="(item,index) in data_list2" :key="index">-->
<!--            <div style="display: inline-block;float: left;font-size: 0.8rem;margin-left: 2%">{{ item.name }}</div>-->
<!--            <div style="display: inline-block;float: right">{{ item.value }}件</div>-->
<!--            <br>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <!--    支付能力排行    -->
      <div class="data3_table">
        <dv-decoration-7 style="width:150px;height:30px;color: #ffffff;font-weight: 600;margin-bottom: 2%;margin-left: -4%">精准施训</dv-decoration-7>
        <dv-scroll-board :config="config_data1" style="width: 100%;height: 96.5%"/>
        <!-- <div id="table04" style="width: 100%;height: 100%"/>-->
      </div>
      <!--   子屏1(事故案件)   -->
      <subscreen_pating :dialogVisible="dialogVisible" @closeDialog="closeDialog"/>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import Subscreen1 from "./subscreen_cases";
import subscreen_pating from "./subscreen_painting";
import {round} from "_echarts@4.9.0@echarts/src/util/number";

export default {
  name: "Part_left",
  components: {
    Subscreen1,subscreen_pating
},
  data() {
    return {
      config_data1: {
        header: ['名称', '案件数', '事故率'],
        data: [
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
          ['浙江大华', '200', '1%'],
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [55],
        rowNum: 6,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      data_list2: [],
      data_pie: [],
      //子屏显示标记
      dialogVisible: false,
      myChart: null,
      // 饼图示例数据
      pieDataDemo: [
        {
          color: '#DD001B',
          industry: '金属制品业',
          proportion: 31
        },
        {
          color: '#FD6431',
          industry: '其他制造业',
          proportion: 8
        },
        {
          color: '#F48C90',
          industry: '橡胶和塑料制品业',
          proportion: 5
        },
        {
          color: '#71C9FD',
          industry: '商务服务业',
          proportion: 4
        },
        {
          color: '#50A1F7',
          industry: '批发业',
          proportion: 4
        },
        {
          color: '#A16D08',
          industry: '零售业',
          proportion: 4
        },
        {
          color: '#D6EBAA',
          industry: '建筑装饰和其他建筑业 ',
          proportion: 3
        },
        {
          color: '#29AB91',
          industry: '通用设备制造业',
          proportion: 3
        },
        {
          color: '#D6E0F2',
          industry: '科技推广和应用服务业',
          proportion: 2
        },
        {
          color: '#FEEDE8',
          industry: '研究和试验发展',
          proportion: 2
        },
      ],
      // 饼图右列表数据框架
      pieListTemp: [
        {
          color: '#FF4343',
          industry: '',
          proportion: 0
        },
        {
          color: '#F69846',
          industry: '',
          proportion: 0
        },
        {
          color: '#F6D54A',
          industry: '',
          proportion: 0
        },
        {
          color: '#86D560',
          industry: '',
          proportion: 0
        },
        {
          color: '#45DBF7',
          industry: '',
          proportion: 0
        },
        {
          color: '#4AC0FF',
          industry: '',
          proportion: 0
        },
        {
          color: '#4E82FF',
          industry: ' ',
          proportion: 0
        },
        {
          color: '#584BFF',
          industry: '',
          proportion: 0
        },
        {
          color: '#BE4DFF',
          industry: '',
          proportion: 0
        },
        {
          color: '#FF4BFF',
          industry: '',
          proportion: 0
        },
      ],
      // 饼图右列表数据
      pieList: [],
      // 饼图-行业事故率数据
      pieData1:{
        // 饼图数据
        dataArray1:[],
        // 列表数据
        dataArray2:[]
      },
      // 饼图-区县案件数数据
      pieData2:{
        // 饼图数据
        dataArray1:[],
        // 列表数据
        dataArray2:[]
      },
      timeTicket:null,
    }
  },
  mounted() {
    //this.initCaseRankIndustry();
  },
  methods: {
    // 案件处置协同
    initCooperationHandle(category, total) {
      const demoCategory = [
        {
          name: "浙江大华",
          value: 500
        },
        {
          name: "永康五金",
          value: 510
        },
        {
          name: "义乌小百货",
          value: 520
        },
        {
          name: "金华建设一局",
          value: 539
        },
        {
          name: "浙江重工",
          value: 570
        }, {
          name: "天翼科技",
          value: 580
        }
      ];
      const demoTotal = 600;
      category = category || demoCategory;
      total = total || demoTotal;

      const myChart = echarts.init(document.getElementById("table06"))
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });
      const option = {
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: { // 设置条形图的边距
          left: 80,
          top: 20,
          right: 80,
          bottom: 20
        },
        yAxis: [{
          type: "category",
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        series: [{
          // 内
          type: "bar",
          barWidth: 7,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              color: function (params) {
                let color = {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "#008EFD" // 0% 处的颜色
                  },
                    {
                      offset: 1,
                      color: "#00B1FD" // 100% 处的颜色
                    }
                  ]
                };
                return color;
              },
            }
          },
          label: {
            normal: {
              show: true,
              position: "left",
              formatter: "{b}",
              textStyle: {
                color: "#fff",
                fontSize: 12
              }
            }
          },
          data: category,
          z: 1,
          animationEasing: "elasticOut"
        },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#061348"
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [1, 9],
            symbolPosition: "start",
            symbolOffset: [1, -1],
            symbolBoundingData: this.total,
            data: category,
            z: 2,
            animationEasing: "elasticOut"
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none"
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return '{a|  ' + params.data + '件}' + '{a|  (85%)}';
                },
                rich: {
                  a: {
                    color: '#FFF'
                  }
                },
                position: 'right',
                distance: 0, // 向右偏移位置
                show: true
              }
            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
            barWidth: 9,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                barBorderColor: "#01418E", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 行业或区县事故案件情况切换
    caseDataChange(category) {
      let pieData = [];
      if(category == 'industry') {
        pieData = this.pieData1.dataArray1;
        this.pieList = this.pieData1.dataArray2;
      } else if(category == 'area') {
        pieData = this.pieData2.dataArray1;
        this.pieList = this.pieData2.dataArray2;
      }
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(document.getElementById("fundRankIndustry"));
      let myChart = this.myChart;
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a}<br>{b}: {c}",
        },
        color: ["#FF4343", "#F69846", "#F6D54A", "#86D560", "#45DBF7", "#4AC0FF", "#4E82FF", "#584BFF", "#BE4DFF", "#FF4BFF", "#86D560"],
        series: [
          {
            name: "事故率",
            type: "pie",
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: pieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 饼图轮播部分--start
      let count = 0;
      let timeTicket =  this.timeTicket;
      let dataLength = option.series[0].data.length;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function () {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 2400);
      myChart.on("mouseover", function (params) {
        clearInterval(timeTicket);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
      myChart.on("mouseout", function (params) {
        timeTicket && clearInterval(timeTicket);
        timeTicket = setInterval(function () {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 2400);
      });
      // 饼图轮播部分--end
      option && myChart.setOption(option);
    },
    // 行业--事故率（饼图）
    initCaseRankIndustry(result) {
      let data1, data2;
      let dataTemp = [
          {
            color: '#FF4343',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#F69846',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#F6D54A',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#86D560',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#45DBF7',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#4AC0FF',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#4E82FF',
            industry: ' ',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#584BFF',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#BE4DFF',
            industry: '',
            proportion: 0,
            unit: '%'
          },
          {
            color: '#FF4BFF',
            industry: '',
            proportion: 0,
            unit: '%'
          },
        ];
      if (result) {
        data1 = [];
        data2 = dataTemp;
        for (let index in result) {
          if (index < 10) {
            data1.push({
              name: result[index].industry,
              value: Number(Math.round(result[index].accidentRate * 10000)) / 100
            })
            data2[index].industry = result[index].industry;
            data2[index].proportion = Number(round(result[index].accidentRate * 10000) / 100);
          }
        }
      }
      const data1Demo = [
        {
          name: '金属制品业',
          value: 31,
        },
        {
          name: '其他制造业',
          value: 8
        },
        {
          name: '橡胶和塑料制品业',
          value: 5
        },
        {
          name: '商务服务业',
          value: 4
        },
        {
          name: '批发业',
          value: 4
        },
        {
          name: '零售业',
          value: 4
        },
        {
          name: '建筑装饰和其他建筑业',
          value: 3
        },
        {
          name: '通用设备制造业',
          value: 3
        },
        {
          name: '科技推广和应用服务业',
          value: 2
        },
        {
          name: '研究和试验发展',
          value: 2
        },
      ];
      this.pieData1.dataArray1 = data1 || data1Demo;
      this.pieData1.dataArray2 = data2 || this.pieDataDemo;
      this.caseDataChange('industry');
    },
    // 区县--案件数（饼图）
    initCaseRankArea(result) {
      let data1, data2;
      let dataTemp = [
        {
          color: '#FF4343',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#F69846',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#F6D54A',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#86D560',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#45DBF7',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#4AC0FF',
          industry: '',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#4E82FF',
          industry: ' ',
          proportion: 0,
          unit: '件'
        },
        {
          color: '#584BFF',
          industry: '',
          proportion: 0,
          unit: '件'
        }
      ];
      if (result) {
        data1 = [];
        data2 = dataTemp;
        for (let index in result) {
          data1[data1.length] = {
            name: result[index].areaCode,
            value: result[index].caseCount
          };
          data2[index].industry = result[index].areaCode;
          data2[index].proportion = result[index].caseCount;
        }
      }
      // 示例数据
      const data1Demo = [
        {value: 1808, name: '婺城区'},
        {value: 1892, name: '兰溪市'},
        {value: 2117, name: '义乌市'},
        {value: 5304, name: '永康市'},
        {value: 1792, name: '东阳市'},
        {value: 2893, name: '武义县'},
        {value: 580, name: '磐安县'},
        {value: 881, name: '浦江县'}
      ];
      this.pieData2.dataArray1 = data1 || data1Demo;
      this.pieData2.dataArray2 = data2 || this.pieDataDemo;
      // const myChart = echarts.init(document.getElementById("table07"));
      // const option = {
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{b} : {c} 件",
      //   },
      //   visualMap: {
      //     show: false,
      //     min: 500,
      //     max: 600,
      //     inRange: {},
      //   },
      //   series: [
      //     {
      //       type: "pie",
      //       radius: "80%",
      //       center: ["50%", "50%"],
      //       color: ["#584BFF", "#4E82FF", "#4AC0FF", "#45DBF7", "#86D560", "#F6D54A", "#F69846", "#FF4343"],
      //       data: data.sort(function (a, b) {
      //         return a.value - b.value;
      //       }),
      //       roseType: "radius",
      //       label: {
      //         normal: {
      //           formatter: ["{b|{b}}"],
      //           rich: {
      //             c: {
      //               color: "rgb(241,246,104)",
      //               fontSize: 20,
      //               fontWeight: "bold",
      //               lineHeight: 5,
      //             },
      //             b: {
      //               color: "rgb(98,137,169)",
      //               fontSize: 15,
      //               height: 40,
      //             },
      //           },
      //         },
      //       },
      //       labelLine: {
      //         normal: {
      //           lineStyle: {
      //             color: "rgb(98,137,169)",
      //           },
      //           smooth: 0.2,
      //           length: 8,
      //           length2: 5,
      //         },
      //       },
      //       itemStyle: {
      //         normal: {
      //           shadowColor: "rgba(0, 0, 0, 0.8)",
      //           shadowBlur: 50,
      //         },
      //       },
      //     },
      //   ],
      // };
      // option && myChart.setOption(option);
    },
    // 跳转对应子屏的回调
    goToDetailed() {
      this.dialogVisible = true;
    },
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false
    },
    // 支付能力排行
    initFundRankRegion(result) {
      let xData, yData;
      if (result) {
        xData = [];
        yData = [];
        for (const item of result) {
          xData[xData.length] = item.areaCode;
          yData[yData.length] = parseFloat(item.payMonthPredict).toFixed(1);
        }
      }

      const xDataDemo = ["金华市", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"];
      const yDataDemo = [10, 8, 7, 6, 5, 4.5, 4, 3];

      xData = xData || xDataDemo;
      yData = yData || yDataDemo;

      let yDataStr = [];
      for (const item of yData) {
        yDataStr[yDataStr.length] = item + '个月';
      }

      const myChart = echarts.init(document.getElementById("table04"))
      const salvProMax = [];//背景按最大值
      for (let i = 0; i < yData.length; i++) {
        salvProMax.push(yData[0])
      }
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= 8) {
      //     idx = 0;
      //   }
      // }, 2400);
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '5%'
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "个月",
            min: -6,
            max: 6,
            interval: 2,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            type: "bar",
            barMaxWidth: 25,
            data: yData.map((item) => {
              // 循环
              return {
                value: item,
                label: {
                  show: true, //开启显示
                  position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
                  formatter: "{c}月",
                  textStyle: {
                    //数值样式
                    color: item < 0 ? "#7CC479" : "#E93030",   //数值颜色
                    fontSize: "18px",
                  },
                },
              };
            }),
            itemStyle: {//柱体背景色
              normal: {
                color: (val) => {
                  var index_color = val.value;
                  return index_color > 0 ? "#E93030" : "#7CC479";
                },
              },
            },
          },

        ]
      }
      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.caseChange1 {
  position: absolute;
  top: 169px;
  left: 315px;
  z-index: 999;
  font-size: 16px;
  color: #ffffff;
  width: 55px;
  height: 24px;
  background-color: darkcyan;
  transform: skewX(45deg);
}

.caseChange2 {
  position: absolute;
  top: 169px;
  left: 375px;
  z-index: 999;
  font-size: 16px;
  color: #ffffff;
  width: 55px;
  height: 24px;
  transform: skewX(45deg);
  background-color: darkcyan;
}

.caseText {
  transform: skewX(-45deg);
}

.left {
  float: left;
  height: 100%;
  width: 26%;
  margin-top: 40px;
}

.box_left1 {
  height: 28%;
  width: 100%;
}

.box_left2 {
  height: 37%;
  width: 100%;
}

  .data3_table {
  width: 100%;
  height: 32%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_left1 {
  height: 18%;
  line-height: 170%;
}

.height_left2 {
  height: 14%;
  line-height: 170%;
}

.height_left3 {
  height: 15%;
  line-height: 170%;
}

.data_left {
  height: 20%;
  width: 94%;
  margin: 1% 6%;
}

.data_left_item {
  float: left;
  height: 100%;
  width: 25%;
}

.data_left_img {
  float: left;
  height: 61%;
  width: 35%;
  margin-top: 7%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.data_left_text {
  display: inline-block;
  float: left;
  width: 65%;
  height: 100%;
  color: #fff;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 6%;
  margin-top: 5%;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 95%;
  height: 60%;
  font-family: LCD2;
  font-size: 1.6rem;
  text-align: left;
  margin-left: 5%;
}

.data1_text4 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 4%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.data1_text3 {
  display: inline-block;
  font-size: .8rem;
  margin-top: 5.8%;
}

.data2_table {
  margin-left: 6%;
  width: 94%;
  height: 61%;
}

.data3_table_top {
  width: 100%;
  height: 24%;
  color: #FBD533;
}

.data3_table_top_img {
  overflow: hidden !important;
  background-size: cover !important;
  height: 100%;
  width: 22%;
  margin-left: 4%;
  float: left;
}

.data3_table_top_text {
  float: left;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 4%;
}
</style>
